<template>
	<navigator class="item" :style="{'marginTop':index==0?0:'28rpx'}" :url="`/subpages/task/detail/detail?id=${item.taskid}&mid=${item.publisher_mid}`" :hover-stop-propagation="true" hover-class="none">
		<view class="title">
			<text>{{item.title}}</text>
		</view>
		<view class="tags">
			<view :class="['tags-item','tags-item-task-status'+item.task_status]" v-if="item.check_status==2">{{taskStatus(item.task_status,item.dealt_status)}}</view>
			<view :class="['tags-item','tags-item-check-status'+item.check_status]" v-if="showStatus">{{checkStatus(item.check_status)}}</view>
			<view class="tags-item">
				<text>{{item.deadline}} 截止</text>
			</view>
		</view>
		<view class="desc">
			<text>{{item.description}}</text>
		</view>
		<view class="detail">
			<view class="price">
				<text>¥{{item.price}}</text>
			</view>
			<view class="person" v-if="item.takeorders_num>0">
				<icon class="iconfont icon">&#xe814;</icon>
				<text>{{item.takeorders_num}}人抢单</text>
			</view>
		</view>
	</navigator>
</template>
<script setup>
	defineProps({
		item: Object,
		index: Number,
		showStatus: {
			type: Boolean,
			default: false
		}
	});
	const TASK_STATUS = {
		// 审核状态
		check: {
			reviewing: 1, //审核中
			reviewSuccess: 2, //审核成功
			reviewFail: 3 //审核失败
		},
		// 任务状态
		task: {
			ongoing: 1, //进行中
			completed: 2, //已完成
			closed: [31, 32] //已关闭（发布者/管理员关闭）
		}
	};
	// 审核状态
	function checkStatus(v) {
		switch (+v) {
			case TASK_STATUS.check.reviewing:
				return '审核中';
			case TASK_STATUS.check.reviewSuccess:
				return '审核成功';
			case TASK_STATUS.check.reviewFail:
				return '审核失败';
		}
	}
	// 状态筛选
	function taskStatus(v, v2) {
		if (TASK_STATUS.task.closed.indexOf(+v2) > -1) return '已关闭';
		switch (+v) {
			case TASK_STATUS.task.ongoing:
				return '进行中';
			case TASK_STATUS.task.completed:
				return '已完成';
		}
	}
</script>
<style>
	page {
		background-color: #F4F4F4;
	}
</style>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	.item {
		margin-top: 28rpx;
		padding: 28rpx;
		border-radius: 18rpx;
		background-color: #fff;
		.title {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			line-height: 54rpx;
			word-break: break-all;
			font-size: 34rpx;
			color: #000;
		}
		.tags {
			@include flex(row, flex-start);
			margin: 14rpx -6rpx;
			&-item {
				height: 44rpx;
				line-height: 44rpx;
				margin: 0 6rpx;
				padding: 0 18rpx;
				border-radius: 6rpx;
				background: #F5F5F5;
				font-size: 22rpx;
				color: #999;
				&-task-status1 {
					background-color: #53A849;
					color: #fff;
				}
				&-task-status2 {
					background-color: #f5f5f5;
					color: #666;
				}
				&-check-status1 {
					background-color: #f5f5f5;
					color: #666;
				}
				&-check-status2 {
					background-color: #FFF5E5;
					color: $color;
				}
				&-check-status3 {
					background-color: #ff0000;
					color: #fff;
				}
			}
		}
		.desc {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			margin: 24rpx 0;
			word-break: break-all;
			font-size: 26rpx;
			color: #888;
		}
		.detail {
			@include flex;
			margin: 20rpx 0 0;
			.price {
				font-size: 38rpx;
				color: #FF0000;
			}
			.person {
				@include flex(row, flex-start);
				font-size: 28rpx;
				color: #888;
				.icon {
					margin-right: 8rpx;
					font-size: 42rpx;
					color: #666;
				}
			}
		}
	}
</style>
